import Vue from 'vue';
import VueRouter from 'vue-router';
import UserLayoutComponent from '../layout/UserLayoutComponent.vue';
import AppBasic from '../layout/AppBasic.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/user',

    // component: { render: (h) => h("router-view") },
    component: UserLayoutComponent,
    hideInMenuBar: true,
    hideChildrenInMenu: true,
    children: [
      {
        path: '',
        redirect: '/user/login',
      },
      {
        path: '/user/login',
        name: 'user-login',
        component: () =>
          import(/* webpackChunkName: 'User' */ '../views/User/Login.vue'),
      },
      {
        path: '/user/register',
        name: 'user-register',
        component: () =>
          import(/* webpackChunkName: 'User' */ '../views/User/Register.vue'),
      },
    ],
  },

  {
    path: '/',
    component: AppBasic,
    redirect: '/dashboard',
    children: [
      {
        path: '/dashboard',
        name: 'dashboard',
        meta: {
          icon: 'dashboard',
          title: '仪表盘',
        },
        component: { render: (h) => h('router-view') },
        children: [
          {
            path: '',
            redirect: '/dashboard/analysis',
          },
          {
            path: '/dashboard/analysis',
            name: 'analysis',
            meta: {
              title: '分析页',
            },
            component: () => import('../views/Dashboard/Analysis.vue'),
          },
        ],
      },
      {
        path: '/form',
        name: 'form',
        component: { render: (h) => h('router-view') },
        meta: {
          icon: 'form',
          title: '表单',
        },
        collapsed: false,
        children: [
          {
            path: '',
            redirect: '/formform-basic',
          },
          {
            path: '/form/form-basic',
            name: 'form-basic',
            meta: {
              title: '基础表单',
            },
            component: () => import('../views/Forms/BasicForm'),
          },
          {
            path: '/form/form-step',
            name: 'form-step',
            meta: {
              title: '分布表单',
            },
            component: () => import('../views/Forms/StepForm'),
            hideChildrenInMenu: true,
            children: [
              {
                path: '',
                redirect: 'step1',
              },
              {
                path: '/form/form-step/step1',
                name: 'step1',
                component: () => import('../views/Forms/StepForm/step1.vue'),
              },
              {
                path: '/form/form-step/step2',
                name: 'step2',
                component: () => import('../views/Forms/StepForm/step2.vue'),
              },
              {
                path: '/form/form-step/step3',
                name: 'step3',
                component: () => import('../views/Forms/StepForm/step3.vue'),
              },
            ],
          },
        ],
      },
    ],
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;
